<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!--[if lt IE 9]>
<script type="text/javascript" src="lib/html5.js"></script>
<script type="text/javascript" src="lib/respond.min.js"></script>
<script type="text/javascript" src="lib/PIE_IE678.js"></script>
<![endif]-->
<link href="css/H-ui.min.css" rel="stylesheet" type="text/css" />
<link href="css/H-ui.admin.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<link href="lib/Hui-iconfont/1.0.7/iconfont.css" rel="stylesheet" type="text/css" />
<style type="text/css">
	.deltmp{cursor: pointer; color: #ff0000;}
	.areablank{position: fixed; display: none; background-color: #fff; overflow-y: scroll;
    width: 80%; border: #333 5px solid; border-radius: 5px; height: 90%; top: 5%; left: 10%;}
	.areablank button{
		position: fixed; bottom: 10%; right: 15%; z-index: 10
	}
	.areablank i.close{
		position: fixed; top: 5%; right: 12%; z-index: 10; font-size: 35px; cursor: pointer;
	}
	
	.areaselect{cursor: pointer;}
	.noinput{border: 0px; background-color: transparent;}
	.noinput:hover{border:0px;}
	tr.sort1:hover{background-color: #f8f8f8}
	tr.sort2:hover{background-color: #fcf8e3;}
	.openarea{padding: 3px 5px; border:#ff0000 1px solid; border-radius: 5px; display: inline-block;}
	.tmpcontrol{cursor: pointer;}
	#arealist input{
		width: 18px;
    	height: 18px;
	}
	.permission-list > dt{border-bottom: #d5d5d5 1px dashed; cursor: pointer; display: flex;}
	.permission-list > dt span{flex: 1; padding-left: 10px;}
	.permission-list > dd{display: none;}
</style>
<!--[if IE 6]>
<script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js" ></script>
<script>DD_belatedPNG.fix('*');</script>
<![endif]-->
<title>运费模板列表</title>
</head>
<body class="pos-r">

<!-- <div class="ui-loading-block" id="loading">
    <div class="ui-loading-cnt">
        <i class="ui-loading-bright"></i>
        <p>正在加载中...</p>
    </div>
</div> -->

<div >
	<nav class="breadcrumb">
		<i class="Hui-iconfont">&#xe67f;</i> <a _href="welcome.html" class="fun-toindex" href="javascript:;">首页</a> 
		<span class="c-gray en">&gt;</span><a href="product-list.html"> 运费模板管理</a> 
		<span class="c-gray en">&gt;</span> 运费模板列表 
		<a class="btn btn-success radius r mr-20 reload" style="line-height:1.6em;margin-top:3px" href="javascript:;" title="刷新" ><i class="Hui-iconfont">&#xe68f;</i></a>
		<span class="r" style="margin-top: -2px; box-sizing: border-box;">
			<select name="cid1" id="cid1" class="select" style="width: auto; height: 31px; vertical-align: middle;">
				<option value="" selected="">全部分类</option>
			</select>

			<select name="cid2" id="cid2" class="select" style="width: auto; height: 31px; vertical-align: middle;">
				<option value="" selected="">全部分类</option>
			</select>

			<select name="flag" id="flag" class="select" style="width: auto; height: 31px; vertical-align: middle;">
				<option value="" selected="">状态</option>
				<option value="0">关闭</option>
				<option value="1">开启</option>
			</select>

			<span style="position:relative">
				<input type="text" name="k" id="search-input" placeholder=" 运费模板名称" style="width:250px" class="input-text">
				<i class="Hui-iconfont i-close" id="inputclear">&#xe706;</i>
			</span>

			<button name="" id="search" class="btn btn-success"><i class="Hui-iconfont">&#xe665;</i> 搜索</button>
		</span>
	</nav>
		
		
	<div class="pd-10">
		<table class="table table-border table-bordered table-bg table-sort">
			<thead>
				<tr class="text-c sort0">
					<th width="40" class="valueid"><input name="" type="checkbox" value="1"></th>
					<th width="40" class="fun-sort2" data-name="id" data-flag="0">ID</th>
					<th>模板名称</th>
		
					
					<th width="150" class="fun-sort2" data-name="goods_addtime" data-flag="0">发布时间</th>
					
					<th width="60">操作</th>
				</tr>
			</thead>
			<tbody id="content_sp">
			  
			</tbody>
		</table>	
	</div>

	<div class="cl pd-5 bg-1 bk-gray mt-20 mb-20"> 
		<a href="javascript:;" class="btn btn-warning l mr-10 mt-5 radius fun-all" data-type="stop"><i class="Hui-iconfont">&#xe6de;</i> 批量关闭</a> 
		<a href="javascript:;" class="btn btn-success l mr-10 mt-5 radius fun-all" data-type="start"><i class="Hui-iconfont">&#xe603;</i> 批量开启</a> 
		<a href="javascript:;" class="btn btn-danger l mr-10 mt-5 radius fun-all" data-type="del"><i class="Hui-iconfont">&#xe6e2;</i> 批量删除</a> 
		
		<!-- <a style="text-decoration:none" onClick="_open('添加模板','transfee-add.html','90%','80%',true)" class="btn btn-warning l mr-10 mt-5 radius" href="javascript:;" title="添加模板">添加模板</a>  -->
		<a style="text-decoration:none" class="btn btn-warning l mr-10 mt-5 radius" href="javascript:;" title="添加模板" id="addtrans">添加模板</a> 


		<span class="r pt-5"  style="line-height: 35px;" id="page"></span>
		<span class="r mr-10"  style="line-height: 40px;" id="dataall"></span>  
	</div>
		
</div>
</div>
<!-- 运费详情模板 -->
<script id="test_tmp" type="text/html">
	<% for (x in list) { %>
	<tr class="trtmp">
		<td class="idtmp"><%=list[x].id%></td>
		<td><label><input name="is_default" type="checkbox" <%if(list[x].is_default==1){%>checked<%}%>>默认</label></td>
		<td class="areaselect">
			<span class="aname" data-cids="<%=list[x].city_id%>" data-pids="<%=list[x].province_id%>"><%=list[x].area_name%></span>
		</td>
		<td><input class="input-text noinput" type="text" name="snum" value="<%=list[x].snum%>" disabled></td>
		<td><input class="input-text noinput" type="text" name="sprice" value="<%=list[x].sprice%>" disabled></td>
		<td><input class="input-text noinput" type="text" name="xnum" value="<%=list[x].xnum%>" disabled></td>
		<td><input class="input-text noinput" type="text" name="xprice" value="<%=list[x].xprice%>" disabled ></td>
		<td class="tmpcontrol" data-id="<%=list[x].id%>">
			<span class="tmpdel">删除</span> <!-- <span class="tmpedit"> 编辑</span> -->
		</td>

	</tr>
	<%}%>
</script>

<!-- 商品列表模版 -->
<script id="test" type="text/html">
  	<% for (x in list) { %>
	<tr class="text-c va-m sort1">
		<td class="valueid"><input name="" type="checkbox" value="<%=list[x].id%>"></td>
		<td><%=list[x].id%></td>
		<td>
			<a style="text-decoration:none;" href="javascript:;" data-sortnum="1" class="tmp-openclose" data-flag="0" data-id="<%=list[x].id%>">
				<input class="input-text noinput" type="text" name="title" value="<%=list[x].title%>" disabled>
			</a>
			
		</td>
		<td class="text-l"><%=list[x].update_time%></td>
		<td class="td-manage f-18">	 
		
			<a style="text-decoration:none" class="ml-5 edit" href="javascript:;" title="编辑"><i class="Hui-iconfont">&#xe6df;</i></a> 
			<a style="text-decoration:none" class="ml-5 fun-del" href="javascript:;" title="删除"><i class="Hui-iconfont">&#xe6e2;</i></a>
		</td>
	</tr>
	
	<!-- 详情 -->
	<tr class="text-c va-m sort2" bgcolor="#dff0d8" style="display: none;">
		<td colspan="8">
			<table class="table table-border table-bordered table-bg table-hover table-sort">
				<thead>
					<tr class="text-c sort0">
						<th width="60" class="fun-sort2" data-name="id" data-flag="0">ID</th>
						<th>是否默认</th>
						<th >运送到</th>
						<th width="80">首件数(件)</th>
						<th width="80">首费(元)</th>
						<th width="80">续件数(件)</th>
						
						<th width="80">续费(元)</th>
						
						<th width="80">操作</th>
					</tr>
				</thead>
				
				<tbody>
			  		<tr bgcolor="#f5fafe">
						<td></td>
			  			<td><label><input name="is_default" type="checkbox">默认</label></td>
			  			<td class="areaselect">
			  				<span class="aname"></span>
			  				<a href="javascript:;"  class="openarea">请选择地区</a>
							<!-- <a href="javascript:;"  class="openarea" onClick="_open('选择地区','trans-area.html','90%','80%',true)">请选择地区</a> -->
							<input type="hidden" name="city_id"><input type="hidden" name="province_id">
			  			</td>
			  			<td><input type="text" class="input-text" name="snum"></td>
			  			<td><input type="text" class="input-text" name="sprice"></td>
			  			<td><input type="text" class="input-text" name="xnum"></td>
			  			<td><input type="text" class="input-text" name="xprice"></td>
			  			<td><button class="btn btn-primary radius" type="button">添加</button></td>
			  		
			  		</tr>
			  	
			  		
				</tbody>
				<tbody class="tmplist">
					
				</tbody>
				
			</table>
			
		</td>
	<tr>
	
	<%}%>  
</script> 

<!-- 区域列表 -->

<div id="arealist" class="areablank">
    <button type="button" class="btn btn-success radius" id="area-save" ><i class="icon-ok"></i> 确定</button>
    <i class="icon Hui-iconfont close" onClick="closearea();">&#xe706;</i>
	<div class="formControls col-12" id="area_sp">
    	
		<script id="test_area" type="text/html">
		<% for (x in list) { %>
			<dl class="permission-list">
				<dt>
					<label>					
						<input type="checkbox" value="<%=list[x].aid%>" name="province_id" id="user-Character-0" <%if(pids.split(",").indexOf(list[x].aid)>-1){%> disabled <%}%>>
						<span><%=list[x].aname%></span>
					</label>
					<span><i class="icon Hui-iconfont">&#xe600;</i></span>
				</dt>
				<dd>
					<dl class="cl permission-list2">
						<dd style="margin-left: 0px;">
						<%for (j in list[x].child){%>
							<label class="" style="display: inline-block;">
								<input type="checkbox" value="<%=list[x].child[j].aid%>" name="city_id" id="user-Character-0-1-0" <%if(cids.split(",").indexOf(list[x].child[j].aid)>-1){%> disabled <%}%>>
								
								<span class="s-pointer" title="<%=list[x].child[j].aname%>"><%=list[x].child[j].aname%></span>
							</label>
						<%}%>
						</dd>
					</dl>
				</dd>

			</dl>
		<%}%>
		</script>
	</div>
</div>

<!-- 区域列表 -->
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="lib/layer/2.1/layer.js"></script>
<script type="text/javascript" src="js/H-ui.js"></script> 
<script type="text/javascript" src="js/H-ui.admin.js"></script> 
<script type="text/javascript" src="js/template-native.js"></script> 
<script type="text/javascript" src="js/s.js"></script> 


<script type="text/javascript" src="lib/laypage/laypage.js"></script> 
<script src="/Manage/js/lazyload.min.js"></script>
<script type="text/javascript">







var API=API_TRANSTMP;
var kk=API_TRANSTMP;
var orderby='';
var search='';

loaddata(API,1);


function closearea(){
	$("#arealist").hide();
}



$(document).ready(function(){ 

	// 编辑模板
	$(document).on('click','a.edit',function(){
		var id=$(this).closest("tr.sort1").find("td.valueid input").val();
		var input=$(this).closest("tr.sort1").find("input[name=title]");
		input.removeClass("noinput");
		input.attr("disabled",false);
		input.focus();
		input.select();
		input.blur(function(){
			$.post(API_TRANSTMP,{
				tid:id,
				title:input.val(),
			},function(data){
				if(!checkStatus(data)) return;
				input.addClass("noinput");
				input.attr("disabled",true);
			})
		})
	})

	// 添加模板
	$(document).on('click','a#addtrans',function(){
		layer.use('extend/layer.ext.js', function(){
		    layer.prompt({
		    	title:'输入模板名称',
		    },function(val, index){
			    
			    $.post(API_TRANSTMP,{
					title:val,
				},function(data){
					if(!checkStatus(data)) return;
					loaddata(API,1,true);
					layer.close(index);
				})
			})
		});
	})

	// 添加详情(obj1:this,obj2:that,transid:添加到id)
	function addtmp(obj1,obj2,transid){
		var snum=obj1.closest("tr").find("td input[name=snum]").val();
		var sprice=obj1.closest("tr").find("td input[name=sprice]").val();
		var xnum=obj1.closest("tr").find("td input[name=xnum]").val();
		var xprice=obj1.closest("tr").find("td input[name=xprice]").val();
		var city_id=obj1.closest("tr").find("td input[name=city_id]").val();
		var province_id=obj1.closest("tr").find("td input[name=province_id]").val();
		var is_default=obj1.closest("tr").find("label input[name=is_default]").is(':checked');
		is_default=is_default?'1':'2';

		if(snum=="" || sprice=="" || xnum=="" || xprice==""){
			layer.msg("请完整填写信息",{icon:5,time:1000});
			return;
		}
		if(city_id=="" && province_id==""){
			layer.msg("请选择区域",{icon:5,time:1000});
			return;
		}

		$.post(API_TRANSTMPDETAIL,{
			city_id:city_id,
			province_id:province_id,
			snum:snum,
			sprice:sprice,
			xnum:xnum,
			xprice:xprice,
			transport_id:transid,
			is_default:is_default,
		},function(data){
			if(!checkStatus(data)) return;
			layer.msg("操作成功",{icon:1,time:1000});
			// 清空输入框
			obj1.closest("tr").find("td input[name=snum]").val("");
			obj1.closest("tr").find("td input[name=sprice]").val("");
			obj1.closest("tr").find("td input[name=xnum]").val("");
			obj1.closest("tr").find("td input[name=xprice]").val("");
			obj1.closest("tr").find("td input[name=city_id]").val("");
			obj1.closest("tr").find("td input[name=province_id]").val("");
			obj1.closest("tr").find("span.aname").html("");
			// 罗列模板
			showtmplist(transid,obj2);
		})		
	}

	// 罗列区域
	function arealist(transid){
		$("#arealist").show();
		// 清空选中按钮
		$("#area_sp input[type='checkbox']:checked").prop("checked",false); 
		$.getJSON(API_TRANSTMPDETAIL+'?tid='+transid,function(data){
			if(!checkStatus(data)) return;
			var pids='';
			var cids='';
			for(x in data.datas){
				pids=pids+data.datas[x].province_id+',';
				cids=cids+data.datas[x].city_id+',';
			}
			// 罗列省市列表
			$.getJSON(API_AREA,function(data){
				var data={'list':data.datas,'pids':pids,'cids':cids};
				var html=template('test_area',data);
				document.getElementById('area_sp').innerHTML=html;
				// 全选按钮
				$(".permission-list dt input:checkbox").click(function(){
					$(this).closest("dl").find("dd input:checkbox").prop("checked",$(this).prop("checked"));
				});
				// 折叠效果
				$(".permission-list dt span").click(function(){
					var that=$(this);
					$(this).parent().next("dd").slideToggle(function(){
	
						$(this).is(':hidden') ? that.html('<i class="icon Hui-iconfont">&#xe600;</i>') : that.html('<i class="icon Hui-iconfont">&#xe6a1;</i>');

						
					});
					
					
				})
			})	
		})
	}


	// 罗列详情列表
	function showtmplist(id,obj){
		$.getJSON(API_TRANSTMPDETAIL+'?tid='+id,function(data){
			if(!checkStatus(data)) return;
			obj.empty();
			var pids='';
			var cids='';

			var data={'list':data.datas};
            var html=template('test_tmp',data);
            obj.html(html)
	

			// 编辑模板，默认
			$(".tmplist input[name=is_default]").on('click',function(){
				var is_default;
				var tmpid=$(this).closest("tr.trtmp").find("td.idtmp").text();
				var that=$(this);
				$(this).is(':checked')? is_default=1 : is_default=0;
				

				$.post(API_TRANSTMPDETAIL,{
					is_default : is_default,
					tid:tmpid,
				},function(data){
					console.log(that.is(':checked'));
					if(!checkStatus(data)) return;
					if(that.is(':checked')){
						that.closest(".tmplist").find("input[name=is_default]").prop("checked",false);
						that.prop("checked",true);
					}
				})
			})
			// 编辑模板信息
			$(".trtmp td").on('click',function(){
				var input=$(this).find("input[type=text]");
				var tmpid=$(this).closest("tr.trtmp").find("td.idtmp").text();
				var title=input.attr("name");

				input.removeClass("noinput");
				input.attr("disabled",false);
				input.focus();
				input.select();
				input.blur(function(){
					var value=input.val();
					var data={};
					if(title=='snum'){
						data={
							snum:value,
							tid:tmpid,
						}
					}else if(title=='sprice'){
						data={
							sprice:value,
							tid:tmpid,
						}
					}else if(title=='xnum'){
						data={
							xnum:value,
							tid:tmpid,
						}
					}else if(title=='xprice'){
						data={
							xprice:value,
							tid:tmpid,
						}
					}
					$.post(API_TRANSTMPDETAIL,data,function(data){
						if(!checkStatus(data)) return;
						input.addClass("noinput");
						input.attr("disabled",true);
					})
				})
			})

			// 编辑区域
			$(".trtmp td.areaselect span").unbind("click").click(function(){
				var tt=$(this);
				tmpid=$(this).closest("tr.trtmp").find("td.idtmp").text();
				arealist(id);
				// 保存省市
				$("#area-save").unbind("click").click(function(){
					var provinceids="";
					var cityids="";
					var names="";
					$("input[name='province_id']:checked").each(function(e){
						provinceids=provinceids+$(this).val()+",";
						names=names+$(this).next("span").text()+",";
					})
					$("input[name='city_id']:checked").each(function(e){
						cityids=cityids+$(this).val()+",";
						names=names+$(this).next("span").text()+",";
					})
					
					$.post(API_TRANSTMPDETAIL,{
						tid:tmpid,
						province_id:provinceids,
						city_id:cityids,
					},function(data){
						if(!checkStatus(data)) return;
						tt.html(names);
					})
					$("#arealist").hide();
				})
			})
			
			

			// 删除详情
			$("span.tmpdel").on('click',function(){
				var that=$(this);
				var id=$(this).parent().data("id");
				$.getJSON(API_TRANSTMPDETAIL+'?del='+id,function(data){
					if(!checkStatus(data)) return;
					that.closest("tr.trtmp").remove();
					layer.msg(data.info,{icon:1,time:1000});
				})
			})
		})
	}

	// 显示隐藏详情

	$(document).on('click','a.tmp-openclose',function(){
		// 处于编辑状态时不打开下拉框
		var input=$(this).find("input[name=title]").prop("disabled");
		if(!input) return;
		var id=$(this).data("id");
	    var flag=$(this).data("flag");
	    var sortnum=$(this).data("sortnum");
	    var sortnext=sortnum+1;
	    that=$(this).closest(".sort"+sortnum).nextUntil(".sort"+sortnum).filter(".sort"+sortnext).find("tbody.tmplist");
	    
	    if(flag=='0'){
	        $(this).closest(".sort"+sortnum).nextUntil(".sort"+sortnum).filter(".sort"+sortnext).slideDown(10);
	        $(this).data("flag","1");
	        // 罗列模板详情列表
	        showtmplist(id,that);
	        // 添加详情
	        $(this).closest("tr.sort1").next(".sort2").find("button").unbind('click').click(function(){
	        	addtmp($(this),that,id)
	        })
	    }else{
	        $(this).closest(".sort"+sortnum).nextUntil(".sort"+sortnum).filter(".sort"+sortnext).slideUp(10);
	        $(this).data("flag","0");

	    }  
	})



	
	// 打开区域
	$(document).on('click','a.openarea',function(){
		var that=$(this);		
		var id=$(this).closest("tr.sort2").prev("tr.sort1").find("td.valueid input").val();

		
		// 罗列区域
		arealist(id);
		

		// 保存省市
		$("#area-save").click(function(){
			var provinceids="";
			var cityids="";
			var names="";
			$("input[name='province_id']:checked").each(function(e){
				provinceids=provinceids+$(this).val()+",";
				names=names+$(this).next("span").text()+",";
			})
			$("input[name='city_id']:checked").each(function(e){
				cityids=cityids+$(this).val()+",";
				names=names+$(this).next("span").text()+",";
			})

			

			that.parent().find("span").html(names);
			that.closest("tr.sort2").find("input[name=province_id]").val(provinceids);
			that.closest("tr.sort2").find("input[name=city_id]").val(cityids);
			$("#arealist").hide();


		})
	})

	


    $("#search").click(function(){
        kk=API+"?";
        var param=[
            'k='+encodeURI(document.querySelector('input[name=k]').value),
            
            'cid1='+document.querySelector('select[name=cid1]').value,
            'cid2='+document.querySelector('select[name=cid2]').value,

            'flag='+document.querySelector('select[name=flag]').value,

        ];
        search=param.join('&');
        kk=kk+search+'&'+orderby;
        loaddata(kk,1);  
    })







	

   
	
    
})





		



</script>
</body>
</html>